<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="系统设置" name="first">
        <transition name="fade" mode="out-in">
          <setting-component :key="activeName" />
        </transition>
      </el-tab-pane>
      <el-tab-pane label="系统通知" name="second">
        <transition name="fade" mode="out-in">
          <notice-component :key="activeName" />
        </transition>
      </el-tab-pane>
      <el-tab-pane label="使用指南" name="third">
        <transition name="fade" mode="out-in">
          <guide-component :key="activeName" />
        </transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import noticeComponent from '@/views/scp/setting/notice.vue'; // 引入系统通知组件
import guideComponent from '@/views/scp/setting/guide.vue';   //引入使用指南组件
import settingComponent from '@/views/scp/setting/setting.vue';//引入系统设置组件

export default {
  name: "Index",
  components: {noticeComponent, guideComponent, settingComponent},
  data() {
    return {
      // 默认页面
      activeName: 'first'
    };
  },
  created() {
  },
  methods: {
    // 页面跳转
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style scoped>
/* 定义 fade 动画 */
 /deep/ .fade-enter-active, .fade-leave-active {
  transition: opacity 0.35s;
}
 /deep/ .fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
